body{
    background-image: url('../../images/lock_1.png');
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-size: cover;
    &::before{
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
    }
}
.main{
    position: relative;
    width: 360px;
    margin: 0 auto;
    margin-top: 10%;
    text-align: center;
    img:first-child{
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    p{
        color: white;
    }
    input{
        width: 290px;
        height: 20px;
        padding: 15px 0;
        padding-left: 10px;
        vertical-align: top;
        outline: none;
        border: none;
        &:hover{
            outline: 2px solid rgb(0,121,254);
        }
        &:focus{
            outline: none;
            box-shadow: 0px 0px 10px white;
        }
        &::placeholder{
            color: rgb(220,220,220);
        }
    }
    img:last-child{
        width: 55px;
        height: 54px;
        margin-top: -2px;
        line-height: 50px;
        cursor: pointer;
        &:hover{
            opacity: 0.5;
        }
    }
    .clear{
        position: absolute;
        cursor: pointer;
        display: none;
        width: 20px;
        height: 20px;
        right: 90px;
        bottom: 20px;
        border-radius: 50%;
        color: white;
        background-color: rgb(173,173,173);
    }
    .other{
        margin-top: 50px;
        a{
            color: #E7E8FF;
            text-decoration: none;
            &:hover{
                color: white;
            }
        }
    }
}